<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      function createActivity(text) {
        return {
          from: { role: 'bot' },
          id: Math.random().toString(36).substr(2, 5),
          text,
          timestamp: new Date().toISOString(),
          type: 'message'
        };
      }

      /** Checks if the element has an ancestor that fulfill the predicate. */
      function hasAncestor(element, predicate) {
        let current = element.parentElement;

        while (current) {
          if (predicate.call(element, current)) {
            return true;
          }

          current = current.parentElement;
        }

        return false;
      }

      run(async function () {
        const directLine = await testHelpers.createDirectLineWithTranscript([
          {
            attachments: [
              {
                contentType: 'application/vnd.microsoft.card.adaptive',
                content: {
                  $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
                  type: 'AdaptiveCard',
                  version: '1.3',
                  body: [
                    {
                      type: 'TextBlock',
                      text: 'Do you want to take a survey?',
                      size: 'Large',
                      weight: 'Bolder',
                      wrap: true
                    },
                    {
                      type: 'ActionSet',
                      actions: [
                        {
                          type: 'Action.Submit',
                          title: 'Yes'
                        },
                        {
                          type: 'Action.Submit',
                          title: 'No'
                        }
                      ]
                    },
                    {
                      type: 'TextBlock',
                      text: 'Card action below',
                      size: 'Large',
                      weight: 'Bolder',
                      wrap: true
                    }
                  ],
                  actions: [
                    {
                      type: 'Action.Submit',
                      title: 'Submit card'
                    }
                  ]
                }
              }
            ],
            from: {
              id: 'bot',
              role: 'bot'
            },
            id: '1',
            timestamp: new Date().toISOString(),
            type: 'message'
          }
        ]);

        WebChat.renderWebChat(
          {
            directLine,
            store: testHelpers.createStore(),
            styleOptions: {
              autoScrollSnapOnActivity: 1
            }
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();
        await pageConditions.numActivitiesShown(1);
        await pageConditions.scrollToBottomCompleted();

        // SETUP: Focus on the send box.
        await pageObjects.focusSendBoxTextBox();

        // SETUP: There should be 2 set of `ac-actionSet` containers.
        expect(document.querySelectorAll('.ac-actionSet')).toHaveLength(2);

        // SETUP: All 'ac-pushButton' should not have `aria-pressed="true"`.
        Array.from(document.querySelectorAll('.ac-pushButton')).every(pushButton =>
          expect(pushButton.hasAttribute('aria-pressed')).not.toBe('true')
        );

        // WHEN: Clicking on the card action button ("Submit card").
        await host.sendShiftTab(3);
        await host.sendKeys('ENTER', 'TAB', 'TAB', 'ENTER');

        // THEN: Selected `ac-pushButton` should have `aria-pressed` set to `true`.
        Array.from(document.querySelectorAll('.ac-pushButton'))
          .filter(pushButton => pushButton.innerText === 'Submit card')
          .forEach(pushButton => expect(pushButton.getAttribute('aria-pressed')).toBe('true'));

        // THEN: Only one button is selected.
        expect(
          Array.from(document.querySelectorAll('.ac-pushButton')).filter(
            pushButton => pushButton.getAttribute('aria-pressed') === 'true'
          )
        ).toHaveLength(1);

        // THEN: Non-selection should not have `aria-pressed` set.
        Array.from(document.querySelectorAll('.ac-pushButton'))
          .filter(pushButton => pushButton.innerText !== 'Submit card')
          .forEach(pushButton => expect(pushButton.getAttribute('aria-pressed')).not.toBe('true'));

        // WHEN: Click on the first action set button ("Yes")
        await host.sendShiftTab(2);
        await host.sendKeys('ENTER');

        // THEN: Selected `ac-pushButton` should have `aria-pressed` set to `true`.
        Array.from(document.querySelectorAll('.ac-pushButton'))
          .filter(pushButton => pushButton.innerText === 'Yes')
          .forEach(pushButton => expect(pushButton.getAttribute('aria-pressed')).toBe('true'));

        // THEN: Two buttons are selected.
        expect(
          Array.from(document.querySelectorAll('.ac-pushButton')).filter(
            pushButton => pushButton.getAttribute('aria-pressed') === 'true'
          )
        ).toHaveLength(2);
      });
    </script>
  </body>
</html>
